<template>
  <view :class="classArr">
    <view :class="[ns.e('header')]" :style="children.NORTH.style">
      <i-biz-panel-detail-shell
        :modelData="children.NORTH.modelData"
        :container="container"
        :controls="controls"
      />
    </view>
    <view :class="[ns.b('content')]">
      <view :class="[ns.be('content', 'left')]" :style="children.WEST.style">
        <i-biz-panel-detail-shell
          :modelData="children.WEST.modelData"
          :container="container"
          :controls="controls"
        />
      </view>
      <view
        :class="[ns.be('content', 'center')]"
        :style="children.CENTER.style"
      >
        <i-biz-panel-detail-shell
          :modelData="children.CENTER.modelData"
          :container="container"
          :controls="controls"
        />
      </view>
      <view :class="[ns.be('content', 'right')]" :style="children.EAST.style">
        <i-biz-panel-detail-shell
          :modelData="children.EAST.modelData"
          :container="container"
          :controls="controls"
        />
      </view>
    </view>
    <view :class="[ns.e('footer')]" :style="children.SOUTH.style">
      <i-biz-panel-detail-shell
        :modelData="children.SOUTH.modelData"
        :container="container"
        :controls="controls"
      />
    </view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IControl, IPanelContainer, IPanelItem } from "@ibiz/model-core";
import {
  IPanelItemController,
  IViewLayoutPanelController,
} from "@ibiz-template/runtime";
import { computed, PropType, CSSProperties } from "vue";
import { useNamespace } from "@/use";
import { ScrollContainerController } from "./i-biz-scroll-container.controller";

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controller: {
    type: ScrollContainerController,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
});

const children = computed(() => {
  const childrenModel: {
    [key: string]: { modelData: IPanelItem; style: CSSProperties };
  } = {};
  props.modelData.panelItems?.forEach((panelItem) => {
    const panelItemC = props.container.panelItems[panelItem.id];
    const pos = (panelItem.layoutPos as IData).layoutPos;
    if (panelItemC && pos) {
      const { width, height } = panelItemC.state.layout;
      let style: CSSProperties = {};
      if (["WEST", "EAST"].includes(pos)) {
        style = { width };
      } else if (["NORTH", "SOUTH"].includes(pos)) {
        style = { height };
      }
      childrenModel[pos] = { modelData: panelItem, style };
    }
  });
  return childrenModel;
});

// 获取命名空间和计算类名数组
const ns = useNamespace("scroll-container");
const { id } = props.modelData;
const classArr = computed(() => {
  const result: Array<string | false> = [
    ns.b(),
    ns.m(id),
    ...props.controller.containerClass,
    ns.is("hidden", !props.controller.state.visible),
  ];
  return result;
});
</script>
<style lang="scss">
@import "./i-biz-scroll-container.scss";
</style>
